ul li{
    text-align: left;
}
.popup-container {
    border-radius: 4px;
    position: fixed;
    z-index: 22;
    background-color: bisque;
    box-shadow: 2px 2px 2px #ddd;
}

.popup-items {
    position: relative;
    padding: 10px 10px 10px 10px;
}

.popup-item {
    border:solid 1px transparent;
    padding: 5px 4px 5px 4px;
}

.popup-item:hover {
    cursor: pointer;
    border:solid 1px #ddd;
}

.trangle {
    position: absolute;
    width: 10px;
    height:10px;
    border: solid 1px;
    border-width: 10px 10px 10px 0px; /** top | left、right | bottom **/
    border-color: transparent;
    
}
.trangle.left-top{
    right: 100%;
    top:10px;
    border-width: 10px 10px 10px 0px; /** top | left、right | bottom **/
    border-right-color:  rgb(32, 32, 30);
}
.trangle.left-bottom{
    right:100%;
    bottom: 10px;
    border-width: 10px 10px 10px 0px; /** top | left、right | bottom **/
    border-right-color:  rgb(32, 32, 30);
}
.trangle.right-top{
    left: 100%;
    top:10px;
    border-width: 10px 0px 10px 10px; /** top | left、right | bottom **/
    border-left-color:  rgb(32, 32, 30);
}

.trangle.right-bottom{
    left:100%;
    bottom: 10px;
    border-width: 10px 0px 10px 10px; /** top | left、right | bottom **/
    border-left-color:  rgb(32, 32, 30);
}
